import React from "react";

// 导入搜索导航栏组件
import SearchHeader from "../../components/SearchHeader";

// 导入 BASE_URL
import { BASE_URL } from "../../utils/url";
import { API } from "../../utils/api";
import styles from "./index.module.css";

// 导入 utils 获取当前定位城市的方法
import { getCurrentCity } from "../../utils/index";
import { Flex, Toast } from "antd-mobile";
import Filter from "./components/Filter";
// 导入吸顶组件
import Sticky from "../../components/Sticky";

import NoHouse from "../../components/NoHouse";
import {
  List,
  AutoSizer,
  WindowScroller,
  InfiniteLoader,
} from "react-virtualized";
import HouseItem from "../../components/HouseItem";
export default class HouseList extends React.Component {
  state = {
    cityId: "",
    address: "北京",
    // 列表数据
    list: [],
    // 总条数
    count: 0,
    // 数据是否加载中
    isLoading: false,
  };

  // 初始化实例属性
  filters = {};

  async componentDidMount() {
    const { label, value } = await getCurrentCity();
    this.setState({
      address: label,
      cityId: value,
    });
    this.searchHouseList();
  }

  // 接受 Filter 组件中的筛选条件数据
  onFilter = (filters) => {
    // 返回页面顶部
    window.scrollTo(0, 0);
    this.filters = filters;
    this.searchHouseList();
  };

  // 获取房屋列表数据
  async searchHouseList() {
    this.setState({
      isLoading: true,
    });
    // 开启loading
    Toast.loading("加载中...", 0, null, false);
    const res = await API.get("/houses", {
      params: {
        cityId: this.state.cityId,
        ...this.filters,
        start: 1,
        end: 20,
      },
    });
    const { count, list } = res.data.body;
    // 关闭loading
    Toast.hide();

    if (count !== 0) {
      // 提示房源数量
      Toast.info(`共找到${count}套房源`, 2, null, false);
    }
    this.setState({
      count,
      list,
      isLoading: false,
    });
  }

  // List组件渲染每一行的方法：
  renderHouseList = ({
    key, // Unique key within array of rows
    index, // 索引号
    style, // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
  }) => {
    // 获取每一行的房屋数据
    const { list } = this.state;
    const house = list[index];

    // 判断 house 是否存在
    // 如果不存在,就渲染 loading 元素占位
    if (!house) {
      return (
        <div key={key} style={style}>
          <p className={styles.loading}></p>
        </div>
      );
    }
    const { houseImg, title, desc, tags, price, houseCode } = house;

    return (
      <HouseItem
        key={key}
        style={style}
        src={BASE_URL + houseImg}
        title={title}
        desc={desc}
        tags={tags}
        price={price}
        onClick={() => this.props.history.push(`/detail/${houseCode}`)}
      />
    );
  };

  // 判断列表中的每一行是否加载完成
  isRowLoaded = ({ index }) => {
    return !!this.state.list[index];
  };

  // 用来获取更多房屋列表数据
  // 该方法返回一个Promise 对象,并且,这个对象应该在数据加载完成时, 来调用resolve 让Promise 对象的状态变成已完成
  loadMoreRows = ({ startIndex, stopIndex }) => {
    return new Promise((resolve) => {
      // 数据加载完成时,调用 resolve 即可
      API.get("/houses", {
        params: {
          cityId: this.state.cityId,
          ...this.filters,
          start: startIndex,
          end: stopIndex,
        },
      }).then((res) => {
        this.setState({
          list: [...this.state.list, ...res.data.body.list],
        });
        // 数据加载完成时，调用 resolve 即可
        resolve();
      });
    });
  };

  renderList = () => {
    const { count, isLoading } = this.state;

    // 关键点:数据加载完才进行count 判断
    if (count === 0 && !isLoading) {
      return <NoHouse>没有找到该条件下房源</NoHouse>;
    }
    return (
      <InfiniteLoader
        isRowLoaded={this.isRowLoaded}
        loadMoreRows={this.loadMoreRows}
        rowCount={count}
      >
        {({ onRowsRendered, registerChild }) => (
          <WindowScroller>
            {({ height, isScrolling, scrollTop }) => (
              <AutoSizer>
                {({ width }) => (
                  <List
                    onRowsRendered={onRowsRendered}
                    ref={registerChild}
                    autoHeight //设置高度为 WindowScroller 最终渲染的列表高度
                    height={height} //视口的高
                    width={width} //视口的宽
                    rowCount={count} // List列表项的总条数
                    rowHeight={120} // 每一行的高度
                    rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
                    isScrolling={isScrolling} //表示是否滚动中,用来覆盖 List 组件自身的滚动状态
                    scrollTop={scrollTop} //页面滚动的距离,用来同步 List 组件的滚动距离
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        )}
      </InfiniteLoader>
    );
  };
  render() {
    return (
      <div>
        {/* 顶部搜索导航栏 */}
        <Flex className={styles.header}>
          <i className="iconfont icon-back"></i>
          <SearchHeader
            cityName={this.state.address}
            className={styles.searchHeader}
          />
        </Flex>

        {/* 条件筛选栏 */}
        <Sticky height={40}>
          <Filter onFilter={this.onFilter} />
        </Sticky>

        {/* 房屋列表 */}
        <div className={styles.houseItems}>{this.renderList()}</div>
      </div>
    );
  }
}
